import React, { useState, useRef, useEffect } from 'react'
import { Space, Table, Tag, Modal, Button } from 'antd';
import { gethazard } from '@/api/hazard'
import Showfrom from '@/components/showinfobar/index'
const Fieldmanagement = () => {
  const [userdata, setUser] = useState([])
  const [infodata, setinfo] = useState([])
  const [isinfoVisible, setinfoVisible] = useState(false)
  const UpdateForm = useRef(null)
  const { confirm } = Modal
  const getdata = async () => {
    let { data: { users } } = await gethazard();
    setUser(users)
  }
  useEffect(() => {
    getdata()
  }, [])
  const showinfo = (item) => {
    setinfo(item)
    setinfoVisible(true)
  }
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '监测序号',
      dataIndex: 'check_id',
      key: 'check_id',
  },
  {
      title: '车主姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <h3>{text}</h3>,
  },
  {
      title: '车牌号',
      dataIndex: 'car_id',
      key: 'car_id',
      render: (text) => <h3>{text}</h3>,
  },
  {
      title: '车检人',
      dataIndex: 'title',
      key: 'title',
      render: (text) => <h3>{text}</h3>,
  },
  {
      title: '车检时间',
      dataIndex: 'birth1',
      key: 'birth1',
  },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <a onClick={() => showinfo(item)}>点击我查看该用户车检风险评估</a>
        </div>
      }
    }
  ]
  return (
    <div>
      <Table columns={columns} dataSource={userdata}
        pagination={{
          pageSize: 6
        }}
        rowKey={item => item.id} />
      <Modal
        open={isinfoVisible}
        destroyOnClose={true}
        title="安全风险评估"
        onCancel={() => {
         setinfoVisible(false)
        }}
        footer={[
          <Button key="submit" type="primary" onClick={() => setinfoVisible(false)}>
            关闭
          </Button>
        ]}>
        <Showfrom ref={infodata}></Showfrom>
      </Modal>
    </div>
  )
}
export default Fieldmanagement